<template>
  <div class="app-container">
    <div class="filter-container">
      <!-- <el-select v-model="queryForm.provinceId" placeholder="省份" style="width: 125px;" @change="chooseProvince">
        <el-option v-for="(item, index) in provinces" :key="index" :value="item.rowId" :label="item.cnName"></el-option>
      </el-select>
      <el-select v-model="queryForm.cityId" placeholder="城市" style="width: 125px;" @change="chooseCity">
        <el-option v-for="(item, index) in citys" :key="index" :value="item.rowId" :label="item.cnName"></el-option>
      </el-select>
      <el-select v-model="queryForm.districtId" placeholder="区" style="width: 125px;" @change="chooseDistrict">
        <el-option v-for="(item, index) in districts" :key="index" :value="item.rowId" :label="item.cnName"></el-option>
      </el-select> -->
      <el-input
        style="width: 200px;"
        placeholder="请输入小区名称"
        v-model="queryForm.communityName"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        placeholder="请输入手机号码"
        v-model="queryForm.openPhone"
      ></el-input>
      <el-input
        style="width: 200px;"
        placeholder="请输入设备编号"
        v-model="queryForm.deviceCode"
      >
      </el-input>
      <el-select
        clearable
        style="width: 150px"
        v-model="queryForm.openMode"
        placeholder="请选择开门方式"
      >
        <el-option
          v-for="(val, key) in Dicts.OPEN_MODE"
          :key="key"
          :label="val"
          :value="key"
        ></el-option>
      </el-select>
      <!-- <el-input style="width: 120px;" placeholder="请输入楼栋" v-model="queryForm.buildingName">
      </el-input> -->
      <el-date-picker
        v-model="queryForm.dateTime"
        type="daterange"
        :picker-options="pickerOptions"
        range-separator="-"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
        value-format="yyyy-MM-dd hh:mm:ss"
        style="width: 300px;"
      >
      </el-date-picker>
      <el-button @click="doQuery" type="primary" icon="el-icon-search"
        >查询</el-button
      >
    </div>
    <el-table v-loading="loading" :data="records" style="width: 100%">
      <el-table-column align="center" prop="rowId" label="ID" width="100">
      </el-table-column>
      <el-table-column
        align="center"
        prop="openName"
        label="用户姓名"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="openPhone"
        label="手机号"
        width="150"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="openIdCard"
        label="身份证"
        width="250"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="openCard"
        label="开门卡号"
        width="250"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="openTime"
        label="开门时间"
        width="250"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="openMode"
        label="开门方式"
        width="150"
      >
        <template slot-scope="scope">
          {{ Dicts.OPEN_MODE[scope.row.openMode] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="villageName"
        label="省/市/区"
        width="450"
        align="center"
      >
        <template slot-scope="scope">
          {{
            `${scope.row.provinceName ? scope.row.provinceName : ''}-${
              scope.row.cityName ? scope.row.cityName : ''
            }-${scope.row.districtName ? scope.row.districtName : ''}`
          }}
          <!-- {{`${scope.row.provinceName}-${scope.row.cityName}-${scope.row.districtName}-${scope.row.townName}-${scope.row.villageName}`}} -->
        </template>
      </el-table-column>
      <el-table-column
        prop="buildingName"
        label="小区/楼栋/单元"
        width="250"
        align="center"
      >
        <template slot-scope="scope">
          {{
            `${scope.row.communityName ? scope.row.communityName : ''}-${
              scope.row.buildingName ? scope.row.buildingName : ''
            }-${scope.row.unitName ? scope.row.unitName : ''}`
          }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="deviceCode"
        label="设备编号"
        width="250"
      >
      </el-table-column>
      <el-table-column
        align="center"
        prop="openPhoto"
        label="开门图片"
        width="250"
      >
        <template slot-scope="scope">
          <div v-viewer>
            <img
              style="width:30px;height:30px;border-radius:5px;"
              v-if="scope.row.openPhoto"
              :src="$oss(scope.row.openPhoto)"
            />
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { queryOpenDoorRecord, deleteOpenDoorRecord } from '@/api/log'
import { queryProvince, getCity, getDistrict } from '@/api/area'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)
export default {
  name: 'openDoorRecord',
  data() {
    return {
      loading: false,
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        startTime: '',
        endTime: '',
        type: undefined,
        title: undefined
      },
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      dateTime: '',
      records: []
    }
  },
  created() {
    this.initOssClient().then(_ => {
      this.doQuery()
    })
  },
  methods: {
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryOpenDoorRecord(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
      queryProvince().then(({ data: { data } }) => {
        this.provinces = data.records
        this.loading = false
      })
    },
    handleDelete(rowId) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteOpenDoorRecord(rowId).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    chooseProvince(rowId) {
      const data = this.provinces.find(item => item.rowId === rowId)
      this.exampleForm.provinceName = data.cnName
      getCity(rowId).then(({ data: { data } }) => {
        this.citys = data.records
        this.loading = false
      })
    },
    chooseCity(rowId) {
      const data = this.citys.find(item => item.rowId === rowId)
      this.exampleForm.cityName = data.cnName
      getDistrict(rowId).then(({ data: { data } }) => {
        this.districts = data.records
        this.loading = false
      })
    }
  },
  components: {}
}
</script>

<style scoped></style>
